<template>
  <template v-if="$route.path === '/mockExam'">
    <div class="examContent">
      <div class="list">
        <Gridadd
          name="创建模拟考试"
          icon="icon-plus"
          @click="toMockExam"
          v-if="!hasMock"
        />
        <Griddata v-for="myExam in listpage.list" :key="myExam.myExamId">
          <template #tag>
            <div>
              <el-tag
                size="large"
                v-if="myExam.myExamState == 1"
                type="primary"
                >{{
                  dictStore.getValue("EXAM_STATE", myExam.myExamState)
                }}</el-tag
              >
              <el-tag
                size="large"
                v-if="myExam.myExamState == 2"
                type="success"
                >{{
                  dictStore.getValue("EXAM_STATE", myExam.myExamState)
                }}</el-tag
              >
              <span v-if="myExam.myExamState == 3" class="state imgState">
                <img :src="yitongguo" alt="Logo" class="stateImg" />
              </span>
              <span v-else-if="myExam.myExamState == 4" class="state imgState">
                <img :src="weitongguo" alt="Logo" class="stateImg" />
              </span>
            </div>
          </template>
          <template #title>
            {{ myExam.paperName }}
          </template>
          <template #content>
            <div
              style="
                margin-bottom: 10px;
                margin-top: 10px;
                text-align: center;
                font-size: 16px;
              "
              v-if="myExam.state == 3"
            >
              考试截止时间：{{ myExam.answerEndTime?.replace(/:\d\d$/, "") }}
            </div>
            <div
              style="
                margin-bottom: 10px;
                margin-top: 10px;
                text-align: center;
                font-size: 16px;
              "
              v-else-if="myExam.answerStartTime"
            >
              考试截止时间：{{
                calculateTimeDifference(myExam.answerStartTime, myExam.passTime)
              }}
            </div>
            <div class="tetsInfo">
              <div style="margin-right: 20px">
                分数：{{ myExam.totalScore || "-" }} /
                {{ myExam.examTotalScore }}
              </div>
              <div :span="12">考试时长：{{ myExam.passTime }}分</div>
            </div>
            <div class="myButton">
              <div
                class="btn check"
                @click="examIn(myExam)"
                v-if="myExam.state == 3"
              >
                查看试卷
              </div>
              <a-popconfirm
                title="确认删除本场模拟考试?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="confirm(myExam)"
                ><div
                  class="btn pass del"
                  v-if="myExam.state == 3"
                >
                  删除考试
                </div>
              </a-popconfirm>
            </div>

            <div
              class="btn goto"
              @click="examIn(myExam)"
              v-if="myExam.state != 3"
            >
              参加考试
            </div>
          </template>
        </Griddata>
      </div>
      <div class="page">
        <el-pagination
          v-model:current-page="listpage.curPage"
          v-model:page-size="listpage.pageSize"
          :total="listpage.total"
          background
          layout="prev, pager, next"
          :hide-on-single-page="true"
          @size-change="query"
          @current-change="query"
          @prev-click="query"
          @next-click="query"
        />
      </div>
    </div>
  </template>
  <RouterView v-else></RouterView>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, watch, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/request";
import dayjs from "dayjs";
import Griddata from "@/components/Griddata.vue";
import { ElMessage } from "element-plus";
import Gridadd from "@/components/Gridadd.vue";
import { useDictStore } from "@/stores/dict";
import CountDown from "@/components/CountDown.vue";

import weitongguo from "@/assets/image/weitongguo.png";
import yitongguo from "@/assets/image/yitongguo.png";

//  定义变量
const dictStore = useDictStore(); // 字典缓存
const route = useRoute();
const router = useRouter();
const hasMock = ref(false);
const queryForm = reactive({
  // 查询表单
  examName: "", // 考试名称
});
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 9,
  total: 0,
  list: [] as any[],
});
async function toMockExam() {
  const examUnStartList = await http.post("myExamMock/publishEx");
  if (examUnStartList.data.code == 200) {
    router.push(`/mockExam/paper/${examUnStartList.data.data}`);
  } else {
    ElMessage.error(examUnStartList.data.msg);
  }
}

// 组件挂载完成后，执行如下方法
onMounted(() => {
  query();
});

// 如果是跳转到列表页，重新查询
watch(
  () => route.path,
  (n, o) => {
    if (n === "/mockExam") {
      query();
    }
  }
);

// 查询
async function query() {
  const {
    data: { code, data },
  } = await http.post("myExamMock/listpage", {
    examName: queryForm.examName,
    curPage: listpage.curPage,
    pageSize: listpage.pageSize,
  });

  if (code !== 200) {
    return;
  }
  listpage.list = data.list.map((myExam: any) => {
    //如果myExamState字段为1或者2则有模拟考试了，hasMock为true
    if (myExam.myExamState == 1 || myExam.myExamState == 2) {
      hasMock.value = true;
    }
    return myExam;
  });
  listpage.total = data.total;
}
function calculateTimeDifference(dateStr, minutes) {
  var dateObj = new Date(dateStr);
  dateObj.setMinutes(dateObj.getMinutes() + minutes);

  // 将新的日期时间转换为 YYYY-MM-DD HH:MM:SS 格式返回
  var year = dateObj.getFullYear();
  var month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
  var day = ("0" + dateObj.getDate()).slice(-2);
  var hours = ("0" + dateObj.getHours()).slice(-2);
  var min = ("0" + dateObj.getMinutes()).slice(-2);
  var sec = ("0" + dateObj.getSeconds()).slice(-2);

  return year + "-" + month + "-" + day + " " + hours + ":" + min;
}
// 考试进入
async function examIn(myExam: any) {
  router.push(`/mockExam/paper/${myExam.id}`);
}
const confirm = async (myExam) => {
  //调用接口删除
  const {
    data: { code, data },
  } = await http.post("myExamMock/del", {
    id: myExam.id,
  });

  if (code == 200) {
    query();
  }
};
</script>

<style lang="scss">
.el-header {
  display: initial;
}
</style>
<style lang="scss" scoped>
.examContent {
  min-height: calc(100vh - 190px);
}
.page {
  display: flex;
  justify-content: flex-end;
}
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .myButton {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  .goto {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      background-color: #46a6ff;
    }
  }
  .pass {
    background: linear-gradient(to right, #32c7cd, #32c7cd);
    &:hover {
      background-color: #32c7cd;
    }
    margin-left: 4px;
  }
  .check {
    margin-right: 4px;
  }
  .tetsInfo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stateImg {
    width: 50px;
  }
  :deep .el-tag--large {
    font-size: 16px;
  }
  :deep .ant-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
  }
  :deep(.grid-content) {
    width: 100%;
    .el-col {
      text-align: center;
    }
  }
}
</style>
  